<template>
	<div class="ranks page_pos_style" :style="{ top: `${phoneStatusBarHeight}`}">
<!--		<van-nav-bar -->
<!--		:title="parseInt(this.$route.query.whatRank)===1?'公司排名':'车型排名'" -->
<!--		fixed placeholder -->
<!--		:border='false' -->
<!--		z-index='9'-->
<!--		>-->
<!--			<template #left >-->
<!--				<van-icon -->
<!--				name="arrow-left" -->
<!--				size="18" -->
<!--				@click="goback()"-->
<!--				/>-->
<!--			</template>-->
<!--		</van-nav-bar>-->
    
    <navbar :title="title"></navbar>
    <div class="page_pos_scroll" :style="{ top: `${phoneStatusBarHeight}`,marginTop:'12vw'}">
			<van-tabs
			v-model="activeName"
			color="#F6C401"
			line-width='30px'
			line-height='3px'
			title-active-color='#333333'
			title-inactive-color='#666666'
			v-if="parseInt(this.$route.query.whatRank)===1"
			>
				<van-tab title="金额" name="a" >
					<div class="box">
						<rank-box :ranking='ranking.price'></rank-box>
					</div>
				</van-tab>
				<van-tab title="用户" name="b">
					<div class="box">
						<rank-box :ranking='ranking.user'></rank-box>
					</div>
				</van-tab>
				<van-tab title="车辆" name="c">
					<div class="box">
						<rank-box :ranking='ranking.vehicle'></rank-box>
					</div>
				</van-tab>
			</van-tabs>

			<van-tabs
			v-model="activeName"
			color="#F6C401"
			line-width='30px'
			line-height='3px'
			title-active-color='#333333'
			title-inactive-color='#666666'
			v-if="parseInt(this.$route.query.whatRank)===2"
			>
				<van-tab title="品牌" name="a" >
					<div class="box">
						<rank-box :ranking='rankingType.brand'></rank-box>
					</div>
				</van-tab>
				<van-tab title="车型" name="b">
					<div class="box">
						<rank-box :ranking='rankingType.carType'></rank-box>
					</div>
				</van-tab>
			</van-tabs>
		</div>
	</div>
</template>

<script>
	import rankBox from '../../components/common/rankBox.vue'
	import { getFindCarSta1 } from './api'
	export default {
		components: {
			rankBox
		},
		data() {
			return {
        // header栏 => 标题
        title:"",
				activeName: 'a',
				switchContent: ['金额','用户','车辆'],
				ranking: [],
				rankingType: [],
        // 获取屏幕状态栏高度
        phoneStatusBarHeight:''
			}
		},
		methods: {
			goback() {
				this.$router.go(-1)
			},
			// 处理数据
			handelAllFindConpany(data) {
				let price = data.map((item,index) => {
					let percent
					if(index === 0) {
						percent = 100
					} else {
						percent = (item.money/data[0].money*100) || (item.userNumber/data[0].userNumber*100) || (item.vehicleNumber/data[0].vehicleNumber*100) || (item.brandNumber/data[0].brandNumber*100) || (item.carModelName/data[0].carModelName*100)
					}
					return {
						rank: index+1,
						name: item.companyName || item.brandName || item.carModelName,
						num: item.money || item.userNumber || item.vehicleNumber || item.brandNumber ,
						percent: percent
					}
				})
				let cutOutPrice = []
				for(let i = 0; i<price.length; i++) {
					if(i<10) {
						cutOutPrice.push(price[i])
					}
				}
				// console.log(cutOutPrice)
				return cutOutPrice
			},
			// 全部寻车
			allFindCar(data) {
				let price = this.handelAllFindConpany(data.statistics.findAllCars.companyRanking.amount)
				let user = this.handelAllFindConpany(data.statistics.findAllCars.companyRanking.user)
				let vehicle = this.handelAllFindConpany(data.statistics.findAllCars.companyRanking.vehicle)
				this.ranking = {
					price,
					user,
					vehicle
				}

				let brand = this.handelAllFindConpany(data.statistics.findAllCars.carStatistics.brand)
				let carType = this.handelAllFindConpany(data.statistics.findAllCars.carStatistics.carModel)
				this.rankingType = {
					brand,
					carType
				}
				// console.log(this.rankingType)
			},
			// 全款
			payAll(data) {
				let price = this.handelAllFindConpany(data.companyRanking.amount)
				let user = this.handelAllFindConpany(data.companyRanking.user)
				let vehicle = this.handelAllFindConpany(data.companyRanking.vehicle)
				let brand = this.handelAllFindConpany(data.carStatistics.brand)
				let carType = this.handelAllFindConpany(data.carStatistics.carModel)
				this.ranking = {
					price,
					user,
					vehicle
				}
				this.rankingType = {
					brand,
					carType
				}
				// console.log(data)
			},
			// 按揭
			mortgage(data) {
				let price = this.handelAllFindConpany(data.companyRanking.amount)
				let user = this.handelAllFindConpany(data.companyRanking.user)
				let vehicle = this.handelAllFindConpany(data.companyRanking.vehicle)
				let brand = this.handelAllFindConpany(data.carStatistics.brand)
				let carType = this.handelAllFindConpany(data.carStatistics.carModel)
				this.ranking = {
					price,
					user,
					vehicle
				}
				this.rankingType = {
					brand,
					carType
				}
			},
			async getData() {
				const {data} = await getFindCarSta1()
				// console.log(data)
				/**
				 * m===1 全部寻车
				 * m===2 全款
				 * m===3 按揭
				 */
				if(this.$route.query.rankId === 1) {
					this.allFindCar(data)
				} else if (this.$route.query.rankId === 2) {
					this.payAll(data.statistics.fullAmount)
				} else if (this.$route.query.rankId === 3) {
					this.mortgage(data.statistics.mortgage)
				}
			}
		},
		created() {
      // 获取屏幕状态栏高度
      this.phoneStatusBarHeight = window.phoneStatusBarHeight
      let status = parseInt(this.$route.query.whatRank);
      // 修改页面标题
      this.title = status ===1?'公司排名':'车型排名';
      document.title = status ===1?'公司排名':'车型排名';
			this.getData()
		}
	}
</script>

<style scoped lang="less">
	.van-tabs{
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.box{
		border-top: 1px solid #E6E6E6;
		padding: 0 16px;
		background-color: white;
	}

</style>
